<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position属性</title>
</head>
<style>
    body{
        height: 1000px;
        border: 1px solid black;
    }
    /*position 参数	解释*/
    /*static	默认值，元素按照标准流正常的显示*/
    /*relative	相对定位，元素依然处于正常的文档流中，可以通过 left ， right，bottom，top 改变元素的位置*/
    /*absolute	绝对定位，元素脱离文档流，可以通过 left ， right，bottom，top 改变元素的位置，它会基于游览器的四个边角进行定位*/
    /*fixed	固定定位，使用 top，left，right，bottom 定位，会脱离正常文档流，不受标准流的约束，并拥有层级的概念*/
    /*inherit	会继承父元素的属性*/
    #div1{
        width: 200px;
        height: 200px;
        background: red;
        /*position: static*默认值，元素按照标准流正常的显示*/
        /*relative	相对定位，元素依然处于正常的文档流中，可以通过 left ， right，bottom，top 改变元素的位置
        相对定位是相对于原来的位置进行移动，且原来的位置还被保留着，层级也提高了。是他盖住了别的颜色而不是别的盖住了他。
        */
        /*position: relative;*/
        /*top: 50px;*/
        /*left: 50px;*/
        margin: 0px auto;

    }
    #div2{
        width: 200px;
        height: 200px;
        background: blue;
        /*fixed	固定定位，使用 top，left，right，bottom 定位，会脱离正常文档流，不受标准流的约束，并拥有层级的概念*/
        position: fixed;
        top: 50px;
        right: 0px;
    }
    #div3{
        width: 50px;
        height: 50px;
        background: green;
        /*absolute	绝对定位，元素脱离文档流，可以通过 left ， right，bottom，top 改变元素的位置，它会基于游览器的四个边角进行定位
        父级边框使用相对定位，子级使用绝对定位
        如果父级有定位的时候，子级的绝对定位就是相对与父级边框进行的移动，否则就是相对于浏览器进行的移动。
        */
        position: absolute;
        top: 50px;
        left: 50px;
    }
</style>
<body>
<div id="div1">
    <div id="div3"></div>
</div>
<div id="div2"></div>
</body>
</html>